<template>
  <div class="list" >
    <!-- id="wlzy" style="display: none" -->
    <!-- <el-table :data="ownProjects" max-height="500" border style="width: 100%">
      <el-table-column  prop="projectId" label="项目ID" width="150"></el-table-column>
      <el-table-column  prop="name"  label="项目名" width="250"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="gotoProject(scope.row.projectId)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <slot>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="switchPageOwn"
        :current-page="ownPageNo"
        :page-sizes="[5, 10, 15, 30]"
        :page-size="ownPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ownListCount">
      </el-pagination>
    </slot> -->
    <div class="menu">
      <div class="menubg" v-for="item in ownProjects"
        :key="index">
        <div style="margin: 1% 20%;width: 60%;" @click="gotoProject(item.projectId)"><img src="../images/icon5-0.png" ></div>
        <div style="margin: -6% 0 0 20%;width: 60%;padding: 4% 0 1% 0;" @click="gotoProject(item.projectId)"><p >{{item.name}}</p></div> 
      </div>
      <div class="menubg">
        <div style="margin: 1% 20%;width: 60%;" @click="createNewGraph()"><img src="../images/icon5-7.png" style="margin-top: 42px;"></div>
          <div style="margin: -6% 0 0 20%;width: 60%;padding: 4% 0 1% 0;"><p style="font-size: 12px;">&nbsp&nbsp</p></div>
      </div>
    </div>
    <NewProjectPanel />
  </div>
  
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import NewProjectPanel from './NewProjectPanel'
export default {
  name: 'HomeProjects',
  computed: {
    ...mapGetters(['ownProjects', 'ownListCount', 'userId','ownPageNo','ownPageSize'])
  },
  data(){
    return{
      // pagesize:10,
    }
  },
  methods: {
    ...mapMutations(['setOwnPageNo','setOwnPageSize','setShowCreatePanel']),
    ...mapActions(['getOwnListByPageNo']),
    gotoProject(id) {
      this.$router.push(`/graph/${id}`)
    },
    switchPageOwn(currPageNo) {
      this.setOwnPageNo(currPageNo)
      console.log(this.ownProjects)
      this.getOwnListByPageNo({
        userId: this.userId,
        pageNo: this.ownPageNo,
        pageSize: this.ownPageSize
      })
    },
    projectTest(){
      console.log("首页测试："+this.ownListCount)
    },
    handleSizeChange(size) {
      // console.log(size, 'size');
      // this.pagesize = size;
      // console.log(this.pagesize); //每页下拉显示数据
      this.setOwnPageSize(size)
      this.getOwnListByPageNo({
        userId: this.userId,
        pageNo: this.ownPageNo,
        pageSize: this.ownPageSize
      })
    },
    createNewGraph() {
      this.setShowCreatePanel(true)
    },
  }
}
</script>

<style scoped>

.list {
  display: flex;
  width: 100%;
}
.menu {
  margin: auto;
  width: 100%;
  height: 100%;
}
.menu .menubg{
  cursor: pointer;
  float: left;
  margin: 60px 0 3% 3%;
  width: 20%;
  background-image: url("../images/menubg.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size:contain;
  /* background-attachment: fixed; */
  margin-top: 60px;
}
.menu .menubg{
padding: 0 5%;
}
.menu .menubg p{
    font-size: 20px;
    color: #fff;
    font-family: "Microsoft YaHei";
}

.menu div img{
    margin-top: 15px;
}


</style>
